<template>
    <Head :class="{'border':is_stick}"></Head>
    <div class="layout-body">
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
      <a-back-top />
</template>

<script lang='ts'>
import { defineComponent, ref } from 'vue'
import Head from '@/components/basic/head.vue'
export default defineComponent({
    components: {
        Head,
    },
    setup() {
        let is_stick = ref(false)
        const scroll = (e: any): void => {
            let scroll_top = e.target.documentElement.scrollTop
            // console.log(e.target.documentElement)
            if(scroll_top > 50) {
                is_stick.value = true
            }
            else {
                is_stick.value = false
            }
        }
        window.addEventListener('scroll', scroll)
        return {
            is_stick
        }
    }
})
</script>

<style lang='scss' scoped>
.border {
    box-shadow: 0 0 10px #ddd;
}
.layout-body {
    min-height: calc(100vh - 50px - 50px);
	// background-color: #f8f8f8;
}
</style>